xml -- xhtml -- html
xml里面的标签可以自定义
DOM用来操作Html和xml功能对象的集合
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<student>
		<name>老嘎</name>
		<age>199</age>	
	</student>
	<!-- 在html的层面来讲，它是一个行级元素，但是在数据的意义上，它能表示一个数据，数据集合，name和age属性
	最开始的数据库，存放数据的格式基于xml -->

	<div></div>
	<script type="text/javascript">
		//dom对象
		var div = document.getElementsByTagName('div')[0];//获取div的标签元素，第一位
		div.style.width = "100px";
		div.style.height = "100px";
		div.style.backgroundColor = "red";
		div.onclick = function(){
			this.style.width = "200px";
			this.style.height = "200px";
			this.style.backgroundColor = "green";
			this.style.borderRadius = "50%";
		}

		//来回变换颜色
		var count = 0;
		div.onclick =function (){
			count ++;
			if(count % 2 == 1){
				div.style.backgroundColor = "yellow";
			}else{
				div.style.backgroundColor = "blue";
			}
		}
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.content{
			width: 200px;
			height:200px;
			border: 1px solid;
			display: none;
		}
		button{
			width: 100px;
			height: 40px;
		}
		.active{
			background-color: blue;
		}
	</style>
</head>
<body>
	<!-- 选项卡功能 -->
	<div class = 'wraper'>
		<button class="active">111</button>
		<button>222</button>
		<button>333</button>
		<div class="content" style="display: block">abc</div>
		<div class="content">efh</div>
		<div class="content">cskjajskf</div>
	</div>

	<script type="text/javascript">
		var btn = document.getElementsByTagName('button');
		var div = document.getElementsByClassName('content');
		for (var i = 0; i < btn.length; i ++ ){//给每一个btn加事件

			(function(n){
				btn[n].onclick = function(){
					for(var j = 0; j < btn.length; j ++){
						btn[j].className = "";//让所有btn去掉className;还原原来的颜色
						div[j].style.display = "none";//让所有div不显示
					}
					this.className = "active";//让当前点击的button加上className
					div[n].style.display = "block";//一旦执行i变了
				}
			}(i))
			
		}
	</script>


</body>
</html>

//方块移动
<script type="text/tpl">
	var div = document.createElement('div');
	document.body.appendChild(div);
	div.style.width = "100px";
	div.style.height = "100px";
	div.style.backgroundColor = "green";
	div.style.position = "absolute";
	div.style.left = "0px"
	div.style.top = "0px"
	var speed = 1;

	var timer = setInterval(function(){
		
		speed += speed/10;
		div.style.left = parseInt(div.style.left) + speed + "px";//parseInt将括号里字符串转换成数字
		div.style.top = parseInt(div.style.top) + speed + "px";
		if(parseInt(div.style.top) > 100 && parseInt(div.style.left) > 50){
			clearInterval(timer);
		}
	},100);//100毫秒后执行括号里的函数
</script>